<template>
  <div class="menu">
    <div class="container">
           
              <div id="menuC_img">
                <div id="menucimg">
                  <img :src="'/api/upload/' + menus[0].menuBigImg"  alt="">
                </div>
                  
                <div class="mc-text ">
                  <div class="el-icon-time">烹饪时间：{{menus[0].cookTime}}</div> 
                  <div class="el-icon-knife-fork">烹饪难度：{{menus[0].cookStar}}</div>
                    
                </div>
              </div>
           
            <div id="menuC-text">
                <div class="menuC-text1">菜品：{{ menus[0].menuName}}</div>
               
                <div class="user">
                    <router-link
                    :to="{ path: '/othercenter', query: { userId: menus[0].userId } }">
                  <img :src="'/api/upload/' + menus[0].userImg">
                    <a class="username"> {{ menus[0].userName}} </a>
                  </router-link>
                    <input type="button" value="+关注" class="watch test" @click="focus" ref="mcfocus">
                </div>
                 <p class="menuc-story"> {{ menus[0].menuStory}} </p>
                 <div class="mclook"><i> {{ menus[0].focusNum}}</i>浏览</div>
               
               
                 <div class="collect" id="collect"><i > <span ref="num">{{ menus[0].fansNum}}</span></i>收藏</div>
          
                <div class="addcoll"><input type="button" class="menucoll test" value="+收藏" @click="save" ref="collect"></div>
              </div>
             <Food/>
             <Step/>
             <Discuss/>
  </div>   

  </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
//组件
import Food from '../../components/menu/Food'
import Step from '../../components/menu/Step'
import Discuss from '../../components/menu/Discuss'

export default {
  components:{
    Food,
    Step,
    Discuss
  },
 name: 'MenuChild',
 data(){
     return{ 
         otheruserId:0,
         queryId:-1,
         menus:[],
         getUserInfo:[],
         user: 0,
        }
    },
     created() {
       //==========详情页面头部=========
       this.queryId=this.$route.params.id
       this.$axios
      .get("/api/createMenu/getmanucdata",{ params: { menuId: this.queryId}})
      .then((res) => {
        console.log("res:", res);
        this.menus = res.data.data;
      })
      .catch((err) => {
        console.log("err:", err);
      });
      //========获取登录信息===========
    this.$axios.defaults.headers.common["Authorization"] = localStorage.getItem(
      "MyToken"
    );
    this.$axios
      .get("/api/users/getUserInfo")
      .then((res) => {
        console.log("res:", res);
        this.getUserInfo = res.data.data
        this.user = res.data.data[0].userId;
      })
      .catch((err) => {
        console.log("err:", err);
      });
      
  },
  watch:{
  getUserInfo(val ,newval){
  if(this.getUserInfo.length!=0){
    console.log('myId:',{
        otheruserId:this.menus[0].userId,
        myId:this.user
        
      });
      //====关注
    this.$axios
    .get("/api/createMenu/focusget",{
      params:{
        otheruserId:this.menus[0].userId,
        myId:this.user
      }
    })
    .then(res=>{
      console.log('focusget:', res.data.data);
     if (res.data.data.length!=0) {
  
     this.$refs.mcfocus.value = "已关注";
     }else{
       this.$refs.mcfocus.value = "+关注";

     }
    });
     
     this.$axios
    .get("/api/createMenu/checksave",{
      params:{
      menuId:this.queryId,
      getuserId:this.user
        
      }
    })
    .then(res=>{
      console.log('focusget:', res.data.data);
     if (res.data.data.length!=0) {
  
     this.$refs.collect.value = "已收藏";

       
     }else{
       this.$refs.collect.value = "+收藏";

     }
    })



  }
}
  },
  methods:{
    focus(){
      if (this.$refs.mcfocus.value == "+关注") {
        this.$refs.mcfocus.value = "已关注"
         this.otheruserId=this.menus[0].userId   //被关注人
      console.log('被关注人id:'+this.otheruserId)  //被关注人id
      console.log('我的id'+this.user);  //我的id
      //添加关注
      this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.otheruserId,
              selfId: this.user,
            },
          })
          .then((res) => {
            console.log(res);
            
          })
          .catch((err) => {
            console.log("err:", err);
          });
        
      }
      else if(this.$refs.mcfocus.value = "已关注"){
        this.$refs.mcfocus.value = "+关注"
        this.otheruserId=this.menus[0].userId
        //=======删除关注数据==========
        this.$axios
        .get("/api/users/delfocus",{
          params:{
             getUserId: this.otheruserId,
             selfId: this.user, //我的

          }
        })
         .then((res) => {
            console.log("del",res);
         
          })
          .catch((err) => {
            console.log("err:", err);
          });
      }
    },
      save(){
      if(this.$refs.collect.value == "+收藏"){
        this.$refs.collect.value = "已收藏"
        this.$axios
        .get("/api/createMenu/changefocusNum",{
          params:{
             queryId:this.queryId,
             menuuserId:this.menus[0].userId ,
             userId: this.user, //我的

          }
        })
         .then((res) => {
           alert('收藏成功')
           this.$refs.num.innerHTML =parseInt(this.$refs.num.innerHTML)+1
         
          })
          .catch((err) => {
            console.log("err:", err);
          });



      }
      else if(this.$refs.collect.value == "已收藏"){
        this.$refs.collect.value = "+收藏"
         this.$axios
        .get("/api/createMenu/mulfocusNum",{
          params:{
             queryId:this.queryId,
             menuuserId:this.menus[0].userId,
             userId: this.user, //我的

          }
        })
         .then((res) => {
           alert('取消收藏')
            this.$refs.num.innerHTML =parseInt(this.$refs.num.innerHTML)-1
         
          })
          .catch((err) => {
            console.log("err:", err);
          });
      }
    }
    
  }
}
</script>
<style lang="css" scoped>
@import "../../css/menu/menuchild.css";
</style>